<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet"  type="text/css" href="css/inputfile.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="easyui/datagrid-detailview.js"></script> 
    <script type="text/javascript" src="js/template-native.js"></script>
    <script type="text/javascript" src="js/other.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#messagelist').datagrid({
                title:"消息列表",
                pagination: true,
                iconCls: 'icon-save',
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
                width: '100%',
                fitColumns:true,
                data: {
                    total: 20,
                    rows: [
                        { "fromuser": "张三", "touser": "李四", "content": "在吗？", "time":"2019-11-28 12:30:20","status":1},
                        { "fromuser": "张三", "touser": "李四", "content": "在吗？", "time":"2019-11-28 12:30:20","status":0},
                        { "fromuser": "张三", "touser": "李四", "content": "在吗？", "time":"2019-11-28 12:30:20","status":1},
                    ]
                },
                columns: [
                    [
                        {field: 'fromuser', title: '发件人', width: 50, align: 'center'},
                        {field: 'touser', title: '收件人', width: 50, align: 'center'},
                        {field: 'content', title: '消息内容', width: 50, align: 'center'},
                        {field: 'time', title: '消息时间', width: 50, align: 'center'},
                        {field: 'status', title: '状态', width: 50, align: 'center', formatter: function (val, row,index){
                            return val==1?'未读取':'已读取';
                        }}
                    ]
                ],
                toolbar: "#tb",
                pagination: true,
                pageSize: 20,
                singleSelect: true,
                pageList: [5,10,20],
            });

        });

    </script>
</head>
<body style="margin:8px;">
<div id="tb" style="padding:3px">
    <input id="pname"  class="easyui-textbox"style="width:200px;" data-options="label:'发件人：',labelWidth:60,labelAlign:'right'">
    <input id="pname"  class="easyui-textbox"style="width:200px;" data-options="label:'收件人：',labelWidth:60,labelAlign:'right'">
    <select id="queryByFlag" class="easyui-combobox" style="width:200px;" data-options="label:'消息状态：',labelWidth:70,labelAlign:'right'">
        <option value="">全部</option>
        <option value="0">未读取</option>
        <option value="1">已读取</option>
    </select>
    <a id="standardQueryBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>

<table id="messagelist"></table>

</body>
</html>
